@extends('Backstage.Layouts.layout')

@section('content')


<div class="layui-btn-group demoTable">
    <a href="{{URL::route('admin_role_save')}}" class="layui-btn ">创建角色</a>
</div>

<hr class="layui-bg-green">
<div class="table layui-form layui-form-pane">
    搜索名称：
    <div class="layui-inline">
        <input class="layui-input"  id="admin_role_name" autocomplete="off">
    </div>
    角色状态：
    <div class="layui-input-inline">
        <select id="admin_role_status"  lay-verify="required" lay-vertype="tips" >
            @foreach(\App\Http\Models\Backstage\AdminRole::getStatusName('status','arr',1) as $key=>$val)
                <option value="{{$key}}">{{$val}}</option>
            @endforeach
        </select>
    </div>

    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table id="list" lay-filter="list"></table>
<script type="text/html" id="bar">
    {{--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>--}}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="admin_role_status" data-id="@{{d.admin_role_id}}" value="@{{d.admin_role_status}}" title="启用" lay-filter="status" @{{ d.admin_role_status == 1 ? 'checked' : '' }}>
</script>
@stop
@section('script')
    <script>


        layui.use('table', function(){
            var table = layui.table,form = layui.form;

            //监听锁定操作
            form.on('checkbox(status)', function(obj){
                setStatus(obj,'{{URL::route('admin_role_status')}}',this.name);
            });
            layer.msg('数据渲染中···', {
                icon: 16
                ,shade: 0.01
            },0);
            //第一个实例
            table.render({
                 elem: '#list'
                ,method: 'post'
                ,where:{_token:'{{csrf_token()}}'}
                ,limit:10
                ,loading:true
                ,cellMinWidth: 120
                ,url: '{{URL::route('admin_role_index')}}' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'admin_role_id',width:80, title: '角色ID', sort: true}
                    ,{field: 'admin_role_name', title: '角色名称'}
                    ,{field: 'admin_role_number', title: '成员数', sort: true}
                    ,{field: 'admin_note_names', title: '角色权限'}
                    ,{field: 'admin_role_created_time', title: '创建时间'}
                    ,{field: 'admin_role_status',title: '角色状态', sort: true,templet: '#status', unresize: true}
                    ,{field: 'menu', title: '操作', fixed: 'right',toolbar: '#bar'}

                ]],done:function () {
                    layer.closeAll();
                }
            });

            //监听工具条
            table.on('tool(list)', function(obj){
                var data = obj.data;

                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
//                        obj.del();
                        del(data.admin_role_id,'{{URL::route('admin_role_del')}}');
                    });
                } else if(obj.event === 'edit'){
                    location.replace('{{URL::route('admin_role_save')}}'+'?id='+data.admin_role_id);
                }
            });


            table.on('sort(list)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                //尽管我们的 table 自带排序功能，但并没有请求服务端。
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                layer.msg('数据渲染中···', {
                    icon: 16
                    ,shade: 0.01
                },0);
                table.reload('list', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        'param[field]': obj.field //排序字段
                        ,'param[order]': obj.type //排序方式
                    }
                });
                return false;
            });

            var active = {
                reload: function(){
                    layer.msg('数据渲染中···', {
                        icon: 16
                        ,shade: 0.01
                    },0);
                    //执行重载
                    table.reload('list', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            param: {
                                admin_role_name: $('#admin_role_name').val(),
                                admin_role_status:$('#admin_role_status').val()
                            }
                        }
                    });
                }
            };

            $('.table .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
    </script>
@stop

